<template>
	<div>
		<el-card class="!border-none mb-4" shadow="never">
			<el-alert type="warning" title="建议在访问低峰期进行操作！" :closable="false" show-icon></el-alert>
		</el-card>
		<el-card class="!border-none mb-4 clear-box" shadow="never">
			<el-row :gutter="15">
				<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in clearList" :key="item.type">
					<el-card class="border-none" shadow="never">
						<div class="title">{{ item.title }}</div>
						<div class="desc">{{ item.desc }}</div>
						<div class="footer">
							<el-button type="primary" v-auth="'setting/clearCache'" @click="handleClean(item.type, item.title)">{{ item.title
								}}</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="cache">
import { ref } from 'vue';
import { systemClearCache } from '/@/api/setting/system';
import { messageBox, messageSuccess } from '/@/utils/message';

// 列表数据
const clearList = ref([
	{
		title: '清除缓存',
		desc: '清除系统生成的缓存数据',
		type: 1
	},
	{
		title: '清除日志',
		desc: '清除系统生成的日志文件',
		type: 2
	},
	{
		title: '清除临时文件',
		desc: '清除系统生成的临时文件',
		type: 3
	}
]);

// 清理缓存
const handleClean = async (type, info) => {
	messageBox('确认要' + info + '吗？').then(async () => {
		await systemClearCache({ type: type });
		messageSuccess('清除成功');
	});
};
</script>

<style scoped lang="scss">
.clear-box {
	.title {
		font-size: 16px;
		text-align: center;
	}

	.desc {
		font-size: 14px;
		text-align: center;
		color: #808695;
		padding: 10px 0;
	}

	.footer {
		text-align: center;
	}
}
</style>